<template>
  <div>
    <public-head :title="title" :path="path" />
    <div class="content">
      <div class="leave-type">
        <van-cell is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">外出地点</span>
            <van-tag type="danger">*</van-tag>
            <input
              v-model="egress"
              type="text"
              placeholder="请输入"
              class="ipt"
            />
          </template>
        </van-cell>
      </div>

      <div class="timeSet">
        <van-cell
          v-model="startTime"
          is-link
          @click="startTimePopupShow = true"
        >
          <template #title>
            <span class="custom-title">开始时间</span>
            <van-tag type="danger">*</van-tag>
          </template>
        </van-cell>

        <van-popup
          v-model="startTimePopupShow"
          round
          position="bottom"
          :style="{ height: '35%' }"
        >
          <van-datetime-picker
            v-model="currentStartDate"
            type="date"
            title="选择 年 月 日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onAddrConfirm('start', $event)"
            @cancel="onAddrCancel('start')"
          />
        </van-popup>

        <van-cell v-model="endTime" is-link @click="endTimePopupShow = true">
          <template #title>
            <span class="custom-title">结束时间</span>
            <van-tag type="danger">*</van-tag>
          </template>
        </van-cell>

        <van-popup
          v-model="endTimePopupShow"
          round
          position="bottom"
          :style="{ height: '35%' }"
        >
          <van-datetime-picker
            v-model="currentEndDate"
            type="date"
            title="选择 年 月 日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onAddrConfirm('end', $event)"
            @cancel="onAddrCancel('end')"
          />
        </van-popup>

        <van-cell is-link>
          <template #title>
            <span class="custom-title">请假时长</span>
            <van-tag type="danger">*</van-tag>
            <input
              v-model="duration"
              type="number"
              placeholder="请输入"
              class="ipt"
            />
          </template>
        </van-cell>
      </div>

      <div class="detail">
        <span style="fontSize:12px;color:rgb(202,202,202)"
          >自动校准打卡记录。</span
        ><span style="fontSize:12px;color:rgb(25,138,255)">《了解详情》</span>
      </div>

      <div class="reason">
        <van-field
          v-model="reasonMessage"
          rows="4"
          autosize
          type="textarea"
          maxlength="30"
          placeholder="请输入请假事由"
          show-word-limit
        />
      </div>

      <div class="appendixTitle">附件</div>
      <div class="appendix">
        <van-uploader v-model="fileList" multiple />
      </div>

      <div class="personTitle">审批人&抄送人</div>
      <div class="person">
        <!-- <van-cell value="审批人" /> -->
        <van-cell>
          <template #title>
            <span class="custom-title">审批人</span>
            <input type="text" placeholder="请输入" v-model="approver" />
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <span class="custom-title">抄送人</span>
            <input type="text" placeholder="请输入" v-model="cc" />
          </template>
        </van-cell>
      </div>

      <div class="button">
        <van-button @click="submitAll" type="info" size="large"
          >提 交</van-button
        >
      </div>
    </div>
    <div class="empty"></div>
  </div>
</template>

<script>
import PublicHead from "../../../components/PublicHead";
import moment from "moment";
import { Notify } from "vant";
export default {
  name: "WaiChu",
  components: {
    PublicHead,
  },
  data() {
    return {
      startTimePopupShow: false,
      endTimePopupShow: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentStartDate: new Date(),
      currentEndDate: new Date(),
      // 提交内容
      startTime: "请选择外出开始时间", //开始时间
      endTime: "请选择外出结束时间", //结束时间
      egress: "", //外出地点
      duration: "", //请假时长
      reasonMessage: "", //事由
      fileList: [
        //图片
        { url: "https://img01.yzcdn.cn/vant/leaf.jpg" },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
      approver: "", //审批人
      cc: "", //抄送人

      title: "外出",
      path: "waichu",
    };
  },
  mounted() {},
  methods: {
    onAddrCancel(v) {
      if (v === "start") {
        this.startTimePopupShow = false;
      } else if (v === "end") {
        this.endTimePopupShow = false;
      }
    },
    onAddrConfirm(e, val) {
      if (e === "start") {
        this.startTime = moment(val).format("YYYY-MM-DD");
        this.startTimePopupShow = false;
      } else if (e === "end") {
        this.endTime = moment(val).format("YYYY-MM-DD");
        this.endTimePopupShow = false;
      }
    },
    //校空
    checkEmpty(val) {
      if (val === "egress") {
        if (this.egress === "") {
          Notify({ type: "warning", message: "外出地点不能为空" });
        }
      } else if (val === "startTime") {
        if (this.startTime === "请选择外出开始时间" || this.startTime === "") {
          Notify({ type: "warning", message: "开始时间不能为空" });
        }
      } else if (val === "endTime") {
        if (this.endTime === "请选择外出结束时间" || this.endTime === "") {
          Notify({ type: "warning", message: "结束时间不能为空" });
        }
      } else if (val === "duration") {
        if (this.duration === "") {
          Notify({ type: "warning", message: "请假时长不能为空" });
        }
      }
    },
    //提交
    submitAll() {
      const listArray = ["egress", "startTime", "endTime", "duration"];
      let submitData = {};
      if (
        this.duration === "" ||
        this.endTime === "请选择外出结束时间" ||
        this.endTime === "" ||
        this.startTime === "请选择外出开始时间" ||
        this.startTime === "" ||
        this.egress === ""
      ) {
        listArray.map((e) => {
          this.checkEmpty(e);
        });
        submitData = {};
      } else if (
        moment(this.endTime).valueOf() - moment(this.startTime).valueOf() <
        0
      ) {
        Notify({ type: "warning", message: "开始时间必须小于结束时间" });
        submitData = {};
      } else {
        submitData = {
          egress: this.egress,
          startTime: this.startTime,
          endTime: this.endTime,
          duration: this.duration,
          reasonMessage: this.reasonMessage,
          fileList: this.fileList,
          approver: this.approver,
          cc: this.cc,
        };
        // 提交
        console.log({ submitData });
        Notify({ type: "success", message: "提交成功" });
        this.clear();
      }
    },
    //清空
    clear() {
      this.egress = "";
      this.startTime = "请选择外出开始时间";
      this.endTime = "请选择外出结束时间";
      this.duration = "";
      this.approver = "";
      this.reasonMessage = "";
      this.fileList = [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }];
      this.cc = "";
    },
    // choseEquip(equipId, equipNo, equipName) {
    //   this.dropdownItemTitle = `${equipName}-${equipNo}`;
    //   this.equipId = equipId;
    //   this.equipNo = equipNo;
    //   this.equipName = equipName;
    //   this.handleMoreLoading();
    //   // 模拟主元素点击事件，实现选择后下拉菜单收起
    //   const e = document.createEvent('MouseEvents');
    //   e.initEvent('click', true, true);
    //   document.getElementById('panel').dispatchEvent(e);
    // },
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.content{
  background-color rgb(245,245,245)
  .leave-type{
    width 345px
    margin  10px auto
  }
  .van-tag--danger{
    background-color #fff
    color rgba(253, 63, 63, 1)
  }
  input{
    margin-left 10px
  }
  .ipt{
    float: right;
    width: 50px;
  }
  .timeSet{
    width 345px
    margin  0 auto
    margin-bottom 5px
  }
  .detail,.reason,.appendixTitle,.appendix,.personTitle,.person,.button{
    width 345px
    margin  0 auto
    margin-bottom 15px
  }
  .person{
    .van-cell:first-child{
      border-bottom 1px solid #ddd
    }
  }
  .appendixTitle{
    font-size 15px
  }
  .appendix{
    background-color #fff
    box-sizing border-box
    padding 10px 5px
    padding-top 20px
  }
}
.empty{
  height 100px
}
</style>
